import { Trash2 } from "lucide-react"
import type { Todo } from "../types/todo"

interface TodoItemProps {
    todo: Todo,
    handleToggle: (id: number, completed: boolean) => void
    handleDeleteTodo: (id: number) => void
}


export default function TodoItem({ todo, handleToggle, handleDeleteTodo }: TodoItemProps) {
    return (
        <div className="flex gap-1 items-center">
            <label className="flex grow items-center gap-2 p-2 border rounded-md border-gray-400 bg-white hover:bg-slate-50">
                <input
                    type="checkbox" className="scale-125"
                    checked={todo.completed}
                    onChange={(e) => handleToggle(todo.id, e.target.checked)} />
                <span className={todo.completed ? "line-through text-gray-400" : ""}>{todo.title}</span>
            </label>
            <button
                className="p-2 cursor-pointer"
                onClick={() => handleDeleteTodo(todo.id)}
            >
                <Trash2 size={20} className="text-gray-500 hover:text-gray-800" />
            </button>
        </div>
    )
}